<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <title>Single</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <!--    <link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>-->
    <!--    <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>-->
    <!--//fonts-->
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="layui/layui.all.js" rel="stylesheet"/>
    <script type="text/javascript" src="js/memenu.js"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>


    <script src="js/main.js"></script>
    <script src="js/simpleCart.min.js"></script>

</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="search">
                <form action="shopping/goods" style="display: flex; gap: 8px;">
                    <input type="text" placeholder="Search" name="keywords">
                    <!--                    <input type="text" value="Search " onfocus="this.value = '';"-->
                    <!--                           onblur="if (this.value == '') {this.value = 'Search';}">-->
                    <button type="button" name="searchbtn" class="layui-btn layui-btn-sm layui-btn-primary" >搜索</button>
                </form>
            </div>
            <div class="header-left">
                <ul>
                    <li><a href="shopping/userinfo">User</a></li>
                    <!--                    <li><a href="shopping/login">Login</a></li>-->
                    <!--                    <li><a href="shopping/register">Register</a></li>-->
                    <li>
                    </li>

                </ul>
                <div class="cart box_1">
                    <a href="shopping/cart">
                        <h3>
                            <div class="total">
                                <span class="simpleCart_total"></span> (<span id="simpleCart_quantity"
                                                                              class="simpleCart_quantity"></span> items)
                            </div>
                            <img src="images/cart.png" alt=""/></h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="logo">
                <a href="shopping/index"><img src="images/logo.png" alt=""></a>
            </div>
            <div class=" h_menu4">
                <ul class="memenu skyblue">
                    <li class="active grid"><a class="color8" href="shopping/index">Home</a></li>
                    <li><a class="color1" href="shopping/goods">Shop</a>

                    </li>
                </ul>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>


<!--content-->
<!---->
<div class="product">
    <div class="container">
        <div class="col-md-3 product-price">

            <div class=" rsidebar span_1_of_left">
                <div class="of-left">
                    <h3 class="cate">Categories</h3>
                </div>
                <ul class="menu fenleilist">

                </ul>
            </div>
            <!--initiate accordion-->
            <script type="text/javascript">
                $(function () {
                    var menu_ul = $('.menu > li > ul'),
                        menu_a = $('.menu > li > a');
                    menu_ul.hide();
                    menu_a.click(function (e) {
                        e.preventDefault();
                        if (!$(this).hasClass('active')) {
                            menu_a.removeClass('active');
                            menu_ul.filter(':visible').slideUp('normal');
                            $(this).addClass('active').next().stop(true, true).slideDown('normal');
                        } else {
                            $(this).removeClass('active');
                            $(this).next().stop(true, true).slideUp('normal');
                        }
                    });

                });
            </script>

            <!---->

            <div class="product-middle">

                <div class="fit-top">
                    <h6 class="shop-top">More Products</h6>
                    <a href="shopping/goods" class="shop-now">SHOP NOW</a>
                    <div class="clearfix"></div>
                </div>
            </div>

        </div>
        <div class="col-md-9 product-price1">
            <div class="col-md-5 single-top">
                <div class="flexslider">
                    <ul class="slides">
                        <li data-thumb="images/si.jpg">
                            <img src="images/si.jpg"/>
                        </li>
                        <li data-thumb="images/si1.jpg">
                            <img src="images/si1.jpg"/>
                        </li>
                        <li data-thumb="images/si2.jpg">
                            <img src="images/si2.jpg"/>
                        </li>
                        <li data-thumb="images/si.jpg">
                            <img src="images/si.jpg"/>
                        </li>
                    </ul>
                </div>
                <!-- FlexSlider -->
                <script defer src="js/jquery.flexslider.js"></script>
                <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>

                <script>
                    // Can also be used with $(document).ready()
                    $(window).load(function () {
                        $('.flexslider').flexslider({
                            animation: "slide",
                            controlNav: "thumbnails"
                        });
                    });
                </script>
            </div>
            <div class="col-md-7 single-top-in simpleCart_shelfItem">
                <div class="single-para ">
                    <h4 class="goodsname">Lorem Ipsum</h4>
                    <div class="star-on">
                        <ul class="star-footer _starsum">
                            <li><i></i></li>
                            <li><i></i></li>
                            <li><i></i></li>
                            <li><i></i></li>
                            <li><i></i></li>
                        </ul>
                        <div>
                            <span>&nbsp; &nbsp; &nbsp;<span class="goodsreview"> 1 </span>&nbsp;customers reviewed</span>

                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <h5 class="item_price">￥ &nbsp;<span class="goodsprice">95.00</span></h5>
                    <p class="goodsinfo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </p>

                    <form>
                        <div>
                            <button type="button" onclick="goodsadd()" class="layui-btn layui-btn-sm layui-btn-danger" style="width: 30px"> — </button>
                            <input type="text" disabled="disabled" class="goodsnum " value="1" style="width: 50px; text-align: center; padding: 8px;">
                            <button type="button" onclick="goodssub()" class="layui-btn layui-btn-sm layui-btn-danger" style="width: 30px"> + </button>
                        </div>
                        <br/><br/>
                        <button type="button" class="layui-btn layui-btn-danger" onclick="goodsfinal()" >ADD TO CART</button>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
            <!---->
            <div class="cd-tabs">
                <ul class="cd-tabs-content">

                </ul>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>
</div>
<!--//content-->
<div class="footer">
    <div class="footer-class">
        <p><a>祝您购物愉快♥</a></p>
    </div>
</div>

<div style="display: none" id="reviewWin" lay-filter="reviewWin" class="layui-form">
    <input name="userpassname" type="hidden">
    <!-- 评分容器 -->
    <div id="rating"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">你的评论</label>
        <div class="layui-input-inline">
            <input type="text" style="width: 250px;height: 250px;" name="reviewcontent" required lay-verify="required" placeholder="说点什么呢？" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <button type="button" class="layui-btn layui-btn-sm" id="passwordconfirm" onclick="savereview()">确认</button>
        <button type="button" class="layui-btn layui-btn-sm" onclick="cancle()">取消</button>
    </div>
</div>







<script src="layui/layui.all.js"></script>



<script>
    const $ = layui.$;
    const rate = layui.rate;

    let grade = 0; // 初始化评分变量

    // 渲染评分组件
    rate.render({
        elem: '#rating',        // 容器ID
        value: 0,               // 初始值
        half: false,            // 关闭半星
        text: true,             // 显示文字
        theme: '#FF5722',       // 主题颜色
        choose: function(value){ // 选择回调
            grade = value;      // 更新评分值
        }
    });



    function getCategory() {
        $.ajax({
            url: "index/list",
            data: {},
            async: false,
            success: function (data) {
                $(".fenleilist").empty();
                for (let i = 0; i < data.length; i++) {
                    $(".fenleilist").append("<li ><a href='shopping/goods'>" + data[i].name + "</a><ul class='item" + i + "' class='cute'></ul></li>");
                }

                for (let i = 0; i < data.length; i++) {
                    let aaa = ".item";
                    aaa = aaa + i;
                    $(aaa).empty();
                    for (let j = 0; j < data[i].children.length; j++) {
                        $(aaa).append("<li class='subitem" + j + "'><a href='shopping/goods'>" + data[i].children[j].name + "</a></li>");
                    }
                }
            }
        });
    }
    getCategory();

    //获取地址传来的goodsid
    var params = new URLSearchParams(window.location.search);
    var goodsid = params.get('id');
    function getGoods(){
        $.ajax({
            url: "goods/getById",
            data: {id: goodsid},
            async: false,
            success: function (goods) {
                $(".goodsname").text(goods.name);
                $(".goodsinfo").text(goods.info);
                $(".goodsprice").text(goods.price);
            }
        });
    }
    getGoods();
    function getreview(){
        $.ajax({
            url: "goods/reviewlist",
            data: {goodsid: goodsid},
            async: false,
            success: function (data) {
                let len=data.length;
                let sum=0;
                $(".goodsreview").text(len);
                $(".cd-tabs-content").empty();
                for (let i = 0; i < len; i++) {
                    sum += data[i].grade;
                    let bbb="reviewitem";
                    bbb=bbb + i;
                    let bbbb="."+bbb;
                    let ccc="_star";
                    ccc=ccc + i;
                    let cccc="."+ccc;
                    $(".cd-tabs-content").append("<li data-content='television' class='selected'><div class='comments-top-top'><div class='top-comment-left'><img class='img-responsive' src='"
                    +data[i].user.imgurl+"' alt=''></div><div class='top-comment-right'><h6 class='"
                    +bbb+"'></h6><ul class='star-footer "+ccc+"'></ul><p>"+data[i].content+"</p></div></div></li><div class='clearfix'></div>");
                    $(bbbb).empty();
                    $(bbbb).append("<a>"+data[i].user.nickname+"</a><br/>"+data[i].reviewtime+"<br/>");
                    $(cccc).empty();
                    let grade=Math.floor(data[i].grade);
                    for (let i = 0; i < grade; i++) {
                        $(cccc).append("<li><i></i></li>");
                    }
                }
                $(".cd-tabs-content").append("<a class='add-re' href='javascript:;' onclick='newreview()'>ADD REVIEW</a>");
                $("._starsum").empty();
                let avg = ~~(sum / len);
                // 仅适用于非负数
                for (let i = 0; i < avg; i++) {
                    $("._starsum").append("<li><i></i></li>");
                }

            }
        });
    }
    getreview();

    function getimg(){
        $.ajax({
            url: "goods/getimg",
            data: {goodsid: goodsid},
            async: false,
            success: function (data) {
                $(".slides").empty();
                for (let i = 0; i < data.length; i++) {
                    $(".slides").append("<li data-thumb='"+data[i].imgurl+"'><img src='"+data[i].imgurl+"'/></li>");
                }
            }
        });
    }
    getimg();


    function goodsadd(){
        let input = $('.goodsnum');
        let vall = parseInt(input.val());
        if(vall > 1) {
            input.val(vall - 1);
        }
    }
    function goodssub(){
        let input = $('.goodsnum');
        let vall = parseInt(input.val());
        input.val(vall + 1);
    }
    function goodsfinal(){
        let input = $('.goodsnum');
        let vall = parseInt(input.val());
        $.ajax({
            url: "goods/addsingletocart",
            data: {goodsid: goodsid,number: vall},
            async: false,
            success: function (data) {
                layer.msg("添加成功");
                easyCart();
            }
        });
    }

    function easyCart() {
        $.ajax({
            url: "cart/list",
            data: {},
            async: false,
            success: function (cart) {
                let sumprice=0;
                let i=0;
                for (i = 0; i < cart.length; i++) {
                    sumprice+=(cart[i].number*cart[i].goods.price);
                }
                sumprice=Math.ceil(sumprice * 100) / 100;
                $(".total").html("<span>￥ &nbsp;&nbsp; "+sumprice+"</span>(<span>"+i+"</span>items)");
            }
        });
    }
    easyCart();

    $("[name='searchbtn']").click(function () {
        let searchtext=$("input[name='keywords']").val();
        location.href="shopping/goods?keywords="+searchtext;
    });

    function cancle(){
        layer.closeAll();
    }

    function newreview(){
        $.ajax({
            url: "goods/ifbought",
            data: {goodsid: goodsid},
            async: false,
            success: function (data) {
                if (data === 1) {
                    layer.open({
                        type: 1,
                        tittle: '天天写好评，天天好心情。',
                        area: ['400px', '400px'],
                        content: $("#reviewWin")
                    });
                }else{
                    layer.closeAll();
                    layer.msg("购买、收货并使用后，才可以评论。");
                }
            }
        });

    }
    function savereview(){
        let review={};
        review.content=$("input[name='reviewcontent']").val();
        review.grade=grade;
        review.goodsid=goodsid;
        // 发送AJAX请求
        $.ajax({
            url: 'goods/newreview',
            data: review,
            async: false,
            success: function(res) {
                layer.closeAll();
                getreview();
                layer.msg('评价提交成功', { icon: 1 });
            },
            error: function(xhr) {
                layer.msg('提交失败', { icon: 2 });
            }
        });


    }

</script>
</body>
</html>
			